<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      background: #000;
      width: 100vw;
      height: 100vh;
      padding: 0;
      margin: 0;
    }

    .frame {
      background-image: url(https://hacks.mozilla.org/files/2017/06/benko-game.png);
      background-repeat: repeat-x;
      background-position: left center;
      width: 100%;
      height: 100%;

      -webkit-clip-path: circle(80px);
      clip-path: circle(80px);
    }

  </style>
</head>
<body>
<article class="frame">
</article>

<script>
  let container = document.querySelector('.frame');
  const RADIUS = 80;

  document.addEventListener('mousemove', function (event) {
    let x = event.clientX;
    let y = event.clientY;

    let circle = `circle(${RADIUS}px at ${x}px ${y}px)`;
    container.style['-webkit-clip-path'] = circle;
    container.style['clip-path'] = circle;
  });
</script>
</body>
</html>